<template>
	<view class="index" :style="{'padding-top':realHeight>0?realHeight + 'px':navigationHeight + 'px'}">
		<view class="indexBox">
			<!-- 头部搜索开始 -->
			<view class="top_nav_wrap">
				<!-- #ifdef APP-PLUS -->
				<view class="status_bar">
					<!-- 状态栏 -->
				</view>
				<!-- #endif -->
				<view class="top-nav" :style="{'height':realHeight>0?realHeight + 'px':50 + 'px','padding-top':statusBarH>0?statusBarH +'px':'','padding-right':menuWidth>0?menuWidth+'px':''}">
					<view class="top_l" @click="switchBtn" style="padding: 6upx 24upx;">
						<view :class="['personal-icon1',userInfo.image_url?'active':'']">
							<!-- <image :src="getImage(userInfo.image_url)" mode="" v-if="userInfo.image_url"></image> -->
							<view v-if="userInfo.image_url" :style="{'border-radius':'50%','width':'100%','height':'100%','background-size':'cover','background-position':'center','background-image':'url('+getImage(userInfo.image_url)+')'}"></view>
							<image src="/static/index/personal1.png" mode="" v-else></image>
						</view>
						<view class="personal-icon2" v-if="!userInfo.image_url"><image src="/static/index/personal-icon2.png" mode=""></image></view>
					</view>
					<view class="top_center" @click="toSearchPage">
						<view class="search-icon"><u-icon name="search" color="#999" size="32"></u-icon></view>
						<view class="inputBox">
							<input type="text" placeholder="早茶" disabled/>
						</view>
					</view>
					<!-- <view style="display: flex;">
						<switch checked="true" @change="changeNow" style="transform: scale(.7);" />
						<text style="font-size: 24upx;width: 48upx;">查看在线</text>
					</view> -->
					<image src="/static/index/zx.png" v-if="zxIndex==1" data-index="1" @click="changeNow" style="width: 120upx;height: 48upx;"></image>
					<image src="/static/index/lx.png" v-if="zxIndex==2" data-index="2" @click="changeNow" style="width: 120upx;height: 48upx;"></image>
					<!-- <picker mode="multiSelector" :range="provinceList" @change="choiceCity" @columnchange="changeProvince" range-key="name">
						<view class="top_r">
							<view class="location-icon"><u-icon name="map-fill" color="#FFAC3F" size="32"></u-icon></view>
							<view class="locationName">{{cityObj.name?cityObj.name:"定位中"}}</view>
						</view>
					</picker> -->
				</view>
			</view>
			<!-- 内容开始 -->
			<view class="index_contBox">
				<!-- <view class="screenBox">
					<view class="screenItem" @click="downBox(index)" v-for="(item,index) in popupList" :key="index">
						<view class="screenName">{{item.name}}</view>
						<u-icon name="arrow-down" size="16" color="#666"></u-icon>
					</view>
					<picker mode="multiSelector" :range="districtList" @change="choiceDistrict">
						<view class="screenItem">
							<view class="screenName">商圈</view>
							<u-icon name="arrow-down" size="16" color="#666"></u-icon>
						</view>
					</picker>
					
				</view> -->
				<view class="screenBox">
					<view class="screenItem" @click="downBox(index)" v-for="(item,index) in popupList" :key="index">
						<view class="screenName">{{item.name}}</view>
						<u-icon name="arrow-down" size="16" color="#666"></u-icon>
					</view>
					<picker mode="multiSelector" :range="districtList" @change="choiceDistrict" range-key="name" @columnchange="areaChange">
						<view class="screenItem">
							<view class="screenName">{{businessObj.id?businessObj.name:"商圈"}}</view>
							<u-icon name="arrow-down" size="16" color="#666"></u-icon>
						</view>
					</picker>
				</view>
				<scroll-view class="commodityList" v-if="conList.length>0" @scrolltolower="loadMoreList" :scroll-y="true">
					<view class="commodityItem" v-for="(item,index) in conList" :key="index" @click="toActivityDetails" :data-id="item.user_id">
						<view class="commodityImage" :style="{'background-image':'url('+getImage(item.image_url)+')'}">
							<!-- <image :src="getImage(item.image_url)" mode=""></image> -->
						</view>
						<view class="commodity_R">
							<view class="commodity_titleBox">
								<view class="commodity-title">{{item.name}}</view>
								<view class="member" v-if="item.platform==4">lv{{item.grade}}</view>
								<view class="SubtitleBox">
									<view class="SubtitleItem" v-for="(pitem,pindex) in item.TalentAuthenticationLabel" :key="pindex">{{pitem.label.name}}</view>
								</view>
							</view>
							<view class="addressBox">
								<view class="addressTitle">{{zxIndex==1?'在线':'商圈'}}</view>
								<view class="address" v-if="zxIndex!=1" style="display: flex;align-items: center;flex-wrap: wrap;">
									<view v-for="(pitem,pindex) in item.UserBusinessAreas" :key="pindex" style="margin-right: 20upx;">
										{{pitem.BusinessAreas.name}}<text style="color:#999999;font-size: 20upx;">({{pitem.distance}}km)</text>
									</view>
								</view>
								<view class="address" v-if="zxIndex==1" style="color: #00B410;">距您{{item.distance?item.distance:0}}km</view>
							</view>
							<view class="TiktokBox">
								<view class="TiktokImage" v-if="item.platform==1">
									<image class="TiktBmg" src="../../static/share/fans.png" mode=""></image>
								</view>
								<view class="TiktokImage" v-if="item.platform==2" style="background: #F40A0B;">
									<image class="TiktBmg" src="../../static/mine/xiaohongshu_white.png" mode="" style="width: 38upx;height: 16upx;"></image>
								</view>
								<view class="TiktokImage" v-if="item.platform==3" style="background: #FFD974;">
									<image class="TiktBmg" src="../../static/mine/weibo_white.png" mode="" style="width: 24upx;height: 22upx;"></image>
								</view>
								<view class="TiktokImage" v-if="item.platform==4" style="background: #F36326;">
									<image class="TiktBmg" src="../../static/mine/dazong_white.png" mode="" style="width: 20upx;height: 20upx;"></image>
								</view>
								<view class="TiktokNum">粉丝{{item.fans_num}}</view>
								<view class="Tiktokgive">{{item.platform==2?'赞藏':'获赞'}}{{item.fabulous_num}}</view>
							</view>
							<view class="introduceBox">
								<view class="introduceTitle">简介</view>
								<view class="introducetext">{{item.introduce}}</view>
							</view>
							<view class="priceBox">￥{{item.money}}起</view>
						</view>
					</view>
				</scroll-view>
				<view v-else style="padding-top: 200upx;">
					<u-empty></u-empty>
				</view>
			</view>
			<!-- 内容结束 -->
			<!-- 下拉框开始 -->
			<view class="popupBox">
				<u-popup v-model="isScreen" mode="bottom"  height="auto">
					<scroll-view class="popupList" :scroll-y="true" @scrolltolower="loadMore">
						<view class="popupItem" v-for="(item,index) in downContent[currents]" @click="popupItem(index)" :key="index">
							<view class="popupName">{{item.text}}</view>
							<!-- <view v-if="currentIndex==index && isScreen">
								<u-icon name="checkbox-mark" color='#FFAC3F'></u-icon>
							</view> -->
						</view>
					</scroll-view>
				</u-popup>
			</view>
			<!-- 下拉框结束 -->
		</view>
	</view>
</template>

<script>
	const app = getApp();
	import {cityAllData} from "../../common/city.js";
	export default {
		data() {
			return {
				isScreen:false,
				currentIndex:0,
				popupList:[{name:"分类"},{name:"大众点评"},{name:"排序"}],
				// popupList:[{name:"排序"},{name:"平台"},{name:"属性"},{name:"状态"}],
				// downContent:[
				// 	行业分类:[{text:"xxx"},{text:"xxx"},{text:"xxx"}],
				// 	平台[{text:"抖音"},{text:"小红书"},{text:"微博"},{text:"点评"}],
				// 	排序[{text:"离我最近"},{text:"稿费升序"},{text:"稿费降序"},{text:"粉丝数量升序"},{text:"粉丝数量降序"}],
				// 	状态[{text:"全部"},{text:"在线"},{text:"离线"}],
				// 	商圈[{text:"全部"},{text:"商圈"}]
				// ],
				downContent:[
					[],
					[{text:"抖音"},{text:"小红书"},{text:"微博"},{text:"大众点评"}],
					[{text:"离我最近"},{text:"稿费升序"},{text:"稿费降序"},{text:"粉丝数量升序"},{text:"粉丝数量降序"}],
					[{text:"全部"},{text:"在线"},{text:"离线"}]
				],
				currents:2,
				zxIndex:2,
				navigationHeight:0,
				realHeight:0,
				statusBarH:0,
				leftDistance:0,
				menuWidth:0,
				districtList:[[],[]],
				cityStr:"",
				cityObj:{},
				businessObj:{},
				provinceList:[[],[]],
				industryIndex:-1,
				platformIndex:4,
				sortIndex:-1,
				statusIndex:-1,
				page:1,
				conList:[],
				userInfo:{},
				labelPage:1,
				labelLimit:100,
				labelMore:false,
				oldArr:[]
			}
		},
		created() {
			//获取状态栏+导航栏的高度
			let _that = this;
			// #ifdef MP-WEIXIN
			//微信小程序胶囊按钮信息
			let res = uni.getMenuButtonBoundingClientRect();
			let { windowWidth, windowHeight } = uni.getSystemInfoSync();
			console.log(res);
			this.menuWidth = res.width + (windowWidth - res.right) + 10;
			// #endif
			uni.getSystemInfo({
				success(e) {
					console.log(e);
					// #ifdef MP-WEIXIN
					// 根据胶囊的位置计算导航栏的高度
					_that.realHeight = (res.top - e.statusBarHeight) *2 + res.height + e.statusBarHeight;
					_that.statusBarH = e.statusBarHeight;
					_that.leftDistance = e.windowWidth - res.width;
					console.log(_that.realHeight,_that.statusBarH);
					// #endif		
					_that.navigationHeight = e.statusBarHeight + 50;
				}
			})
			uni.$on("clearUser",(userInfo)=>{
				this.userInfo = userInfo;
			})
			uni.$on("showsClient",()=>{
				this.userInfo = uni.getStorageSync("rmUser");
				this.getProvince(0);
				this.getCate();
				if(app.$vm.globalData.latitude){
					this.cityStr = uni.getStorageSync("cityStr")
					this.cityObj = uni.getStorageSync("cityData");
					this.getArea();
					this.getList();
				}else{
					console.log(app.$vm.indexInitFun)
					Promise.all([app.$vm.indexInitFun()]).then(res=>{
						this.$u.api.addressAnalysis({str:app.$vm.globalData.latitude+","+app.$vm.globalData.longitude}).then(res=>{
							console.log(JSON.parse(res.data.data))
							let das = JSON.parse(res.data.data);
							this.cityStr = das.result.address_component.city;
							uni.setStorageSync("cityStr",this.cityStr)
							this.getCity();
						})
					})
					// app.$vm.indexInitFun.then(result=>{
					// 	this.$u.api.addressAnalysis({str:app.$vm.globalData.latitude+","+app.$vm.globalData.longitude}).then(res=>{
					// 		console.log(JSON.parse(res.data.data))
					// 		let das = JSON.parse(res.data.data);
					// 		this.cityStr = das.result.address_component.city;
					// 		this.getCity();
					// 	})
					// })
				}
			})
		},
		mounted() {
			
			let str = "asdklaj?asdjkljakls?asdkljasd";
			// console.log(str,str.substring(str.indexOf("?")+1))
			this.userInfo = uni.getStorageSync("rmUser");
			this.getProvince(0);
			this.getCate();
			if(app.$vm.globalData.latitude){
				if(uni.getStorageSync("cityData")){
					this.cityStr = uni.getStorageSync("cityStr")
					this.cityObj = uni.getStorageSync("cityData");
					this.getArea();
					this.getList();
				}else{
					this.$u.api.addressAnalysis({str:app.$vm.globalData.latitude+","+app.$vm.globalData.longitude}).then(res=>{
						console.log(JSON.parse(res.data.data))
						let das = JSON.parse(res.data.data);
						this.cityStr = das.result.address_component.city;
						uni.setStorageSync("cityStr",this.cityStr)
						this.getCity();
					})
				}
			}else{
				Promise.all([app.$vm.indexInitFun()]).then(res=>{
					console.log(res)
					this.$u.api.addressAnalysis({str:app.$vm.globalData.latitude+","+app.$vm.globalData.longitude}).then(res=>{
						console.log(JSON.parse(res.data.data))
						let das = JSON.parse(res.data.data);
						this.cityStr = das.result.address_component.city;
						uni.setStorageSync("cityStr",this.cityStr)
						this.getCity();
					})
				})
				.catch(err=>{
					console.log(err)
					uni.showModal({
						content:"请检查手机定位是否开启并且授权给软件后重试！",
						
					})
				})
				// app.$vm.indexInitFun.then(result=>{
				// 	this.$u.api.addressAnalysis({str:app.$vm.globalData.latitude+","+app.$vm.globalData.longitude}).then(res=>{
				// 		console.log(JSON.parse(res.data.data))
				// 		let das = JSON.parse(res.data.data);
				// 		this.cityStr = das.result.address_component.city;
				// 		this.getCity();
				// 	})
				// })
			}
		},
		methods: {
			loadMoreList(){
				if(!this.moreFlag){
					return false;
				}
				this.moreFlag = false;
				this.page = this.page + 1;
				this.getList();
			},
			loadMore(){
				if(!this.labelMoreFlag){
					return false;
				}
				this.labelMoreFlag = false;
				this.labelPage = this.labelPage + 1;
				this.getLabel();
			},
			getImage(url){
				if(url&&(url.indexOf("http://")!=-1||url.indexOf("https://")!=-1)){
					return url;
				}else{
					return app.$vm.globalData.imgBaseUrl + url;
				}
			},
			getList(){
				let obj = {};
				if(this.industryIndex>0){
					obj.label_id = this.downContent[0][this.industryIndex].id;
				}
				obj.platform = this.platformIndex;
				if(this.statusIndex>0){
					obj.is_on_line = this.statusIndex;
				}
				if(this.businessObj.id){
					obj.business_areas_id = this.businessObj.id;
				}
				if(this.sortIndex==0){
					obj.juli = 1;
				}else if(this.sortIndex==1){
					obj.money = 1;
				}else if(this.sortIndex==2){
					obj.money = 2;
				}else if(this.sortIndex==3){
					obj.fans_num = 1;
				}else if(this.sortIndex==4){
					obj.fans_num = 2;
				}
				obj.dimension = app.$vm.globalData.latitude;
				obj.longitude = app.$vm.globalData.longitude;
				
				let newObj = {};
				newObj.page = this.page;
				newObj.data = obj;
				this.$u.api.talentAuthenticationGetList(newObj).then(res=>{
					if(this.page == 1){
						this.conList = res.data.list.data.map(cur=>{
							cur.distance = (Math.round(cur.juli*100)/100).toFixed(2);
							cur.UserBusinessAreas.map(pcur=>{
								pcur.distance = app.$vm.getDistance(Number(pcur.dimension),Number(pcur.longitude));
								return pcur;
							})
							return cur;
						});
					}else{
						this.conList = this.conList.concat(res.data.list.data.map(cur=>{
							cur.distance = (Math.round(cur.juli*100)/100).toFixed(2);
							cur.UserBusinessAreas.map(pcur=>{
								pcur.distance = app.$vm.getDistance(Number(pcur.dimension),Number(pcur.longitude));
								return pcur;
							})
							return cur;
						}));
					}
					if(this.page<res.data.list.last_page){
						this.moreFlag = true;
					}else{
						this.moreFlag = false;
					}
				})
				// if(this.statusIndex>0){
				// 	this.$u.api.talentAuthenticationGetList(newObj).then(res=>{
				// 		if(this.page == 1){
				// 			this.conList = res.data.list.data.map(cur=>{
				// 				cur.distance = (Math.round(cur.juli*100)/100).toFixed(2);
				// 				return cur;
				// 			});
				// 		}else{
				// 			this.conList = this.conList.concat(res.data.list.data.map(cur=>{
				// 				cur.distance = (Math.round(cur.juli*100)/100).toFixed(2);
				// 				return cur;
				// 			}));
				// 		}
				// 		if(this.page<res.data.list.last_page){
				// 			this.moreFlag = true;
				// 		}else{
				// 			this.moreFlag = false;
				// 		}
				// 	})
				// }else{
				// 	newObj.data.type = 1;
				// 	this.$u.api.talentAuthenticationGetList(newObj).then(res=>{
				// 		console.log(res)
				// 		let arr1 = res.data.list.data.map(cur=>{
				// 			cur.distance = (Math.round(cur.juli*100)/100).toFixed(2);
				// 			return cur;
				// 		});
				// 		newObj.data.type = 2;
				// 		let arr3 = this.conList;
				// 		let arrs1 = [];
				// 		for(let i=0;i<arr1.length;i++){
				// 			for(let j=0;j<arr3.length;j++){
				// 				if(arr1[i].id==arr3[j].id){
				// 					arr1[i].flag = true;
				// 					break;
				// 				}
				// 			}
				// 		}
				// 		for(let i=0;i<arr1.length;i++){
				// 			if(!arr1[i].flag){
				// 				arrs1.push(arr1[i])
				// 			}
				// 		}
				// 		this.$u.api.talentAuthenticationGetList(newObj).then(res1=>{
				// 			let arr2 = res1.data.list.data.map(cur=>{
				// 				cur.distance = (Math.round(cur.juli*100)/100).toFixed(2);
				// 				return cur;
				// 			});
				// 			let arrs2 = [];
				// 			for(let i=0;i<arr2.length;i++){
				// 				for(let j=0;j<arr3.length;j++){
				// 					if(arr2[i].id==arr3[j].id){
				// 						arr2[i].flag = true;
				// 						break;
				// 					}
				// 				}
				// 			}
				// 			for(let i=0;i<arr2.length;i++){
				// 				if(!arr2[i].flag){
				// 					arrs2.push(arr2[i])
				// 				}
				// 			}
				// 			let arrs3 = arrs1.concat(arrs2).concat(this.oldArr);
				// 			let arrs4 = [];
				// 			for(let i=0;i<arrs3.length;i++){
				// 				let arrobj = arrs3[i];
				// 				let flag = false;
				// 				for(let j=0;j<arrs3.length;j++){
				// 					if(obj.id==arrs3[j].id){
				// 						flag = true;
				// 						if(Number(obj.distance)>Number(arrs3[j].distance)){
				// 							obj = arrs3[j];
				// 						}
				// 					}
				// 				}
				// 				if(flag){
				// 					arrs4.push(arrobj);
				// 				}
				// 			}
				// 			let arrs5 = [];
				// 			for(let i=0;i<arrs3.length;i++){
				// 				let flag = false;
				// 				for(let j=0;j<arrs4.length;j++){
				// 					if(arrs3[i].id==arrs4[j].id){
				// 						flag = true;
				// 						break;
				// 					}
				// 				}
				// 				if(!flag){
				// 					arrs5.push(arrs3[i]);
				// 				}
				// 			}
				// 			let arrs6 = arrs5.concat(arrs4);
				// 			let arrs7 = arrs6.sort(function(a,b){
				// 				return Number(a.distance) - Number(b.distance);
				// 			});
				// 			console.log(arrs7)
				// 		})
				// 		// if(this.page == 1){
				// 		// 	this.conList = res.data.list.data.map(cur=>{
				// 		// 		cur.distance = (Math.round(cur.juli*100)/100).toFixed(2);
				// 		// 		return cur;
				// 		// 	});
				// 		// }else{
				// 		// 	this.conList = this.conList.concat(res.data.list.data.map(cur=>{
				// 		// 		cur.distance = (Math.round(cur.juli*100)/100).toFixed(2);
				// 		// 		return cur;
				// 		// 	}));
				// 		// }
				// 		// if(this.page<res.data.list.last_page){
				// 		// 	this.moreFlag = true;
				// 		// }else{
				// 		// 	this.moreFlag = false;
				// 		// }
				// 	})
				// }
			},
			changeProvince(e){
				if(e.detail.column==0){
					this.getProvince(this.provinceList[0][e.detail.value].id);
				}
			},
			choiceCity(e){
				this.cityObj = this.provinceList[1][e.detail.value[1]];
				uni.setStorageSync("cityData",this.cityObj)
				this.page = 1;
				this.businessObj = {};
				this.districtList = [[],[]];
				this.getList();
				this.getArea();
			},
			getProvince(id){
				let obj = {};
				obj.area_parent_id = id;
				this.$u.api.areaList1(obj).then(res=>{
					if(id==0){
						this.provinceList.splice(0,1,res.data.list);
						this.getProvince(res.data.list[0].id);
					}else{
						this.provinceList.splice(1,1,res.data.list);
					}
				})
			},
			choiceDistrict(e){
				console.log(e)
				if(e.detail.value[0] == 0){
					this.businessObj = {};
				}else{
					this.businessObj = this.districtList[1][e.detail.value[1]];
				}
				this.page = 1;
				this.getList();
			},
			areaChange(e){
				console.log(e)
				if(e.detail.column==0){
					if(e.detail.value==0){
						this.districtList.splice(1,1,[{name:"全部",id:-1}]);
					}else{
						this.getDistrict(this.districtList[0][e.detail.value].id);
					}
				}
			},
			getArea(){
				let obj = {};
				obj.area_parent_id = this.cityObj.id;
				this.$u.api.areaList1(obj).then(res=>{
					res.data.list.unshift({name:"全部",id:-1})
					this.districtList.splice(0,1,res.data.list);
					this.districtList.splice(1,1,[{name:"全部",id:-1}]);
				})
			},
			getDistrict(id){
				let obj = {};
				obj.did = id;
				this.$u.api.businessAreasList({data:obj}).then(res=>{
					this.districtList.splice(1,1,res.data.list);
				})
			},
			getCity(){
				for(let i=0;i<cityAllData.length;i++){
					if(cityAllData[i].name.indexOf(this.cityStr)!=-1){
						this.cityObj = cityAllData[i];
						uni.setStorageSync("cityData",this.cityObj)
					}
				}
				this.getArea();
				this.getList();
			},
			getCate(){
				let obj = {};
				obj.type = 5;
				obj.page = this.labelPage;
				obj.limit = this.labelLimit;
				this.$u.api.indexLabelList(obj).then(res=>{
					console.log(res)
					let arr = [];
					let arr1 = [];
					arr1.push({text:"全部",id:""});
					for(let i=0;i<res.data.list.data.length;i++){
						let obj = res.data.list.data[i];
						obj.text = obj.name;
						arr1.push(obj);
					}
					if(this.labelPage==1){
						this.downContent[0] = arr1;
					}else{
						this.downContent[0] = this.downContent[0].concat(arr1);
					}
					if(this.labelPage<res.data.list.last_page){
						this.labelMoreFlag = true;
					}else{
						this.labelMoreFlag = false;
					}
				})
			},
			//切换身份
			switchBtn(){
				uni.$emit("showSetting")
				// uni.showModal({
				// 	title:"是否切换身份？",
				// 	showCancel:true,
				// 	success(res) {
				// 		if(res.confirm){
				// 			uni.$emit('ServerIndex-page',true);
				// 		}
				// 	}
				// })
			},
			//详情
			toActivityDetails(e){
				let id = e.target.dataset.id || e.currentTarget.dataset.id;
				uni.navigateTo({
					url:"/pages/pageone/pages/Business-card/Business-card?id="+id
				})
			},
			//商品列表
			toProductList(){
				uni.navigateTo({
					url:"/pages/pagefour/pages/Product-list/Product-list"
				})
			},
			//搜索
			toSearchPage(){
				uni.navigateTo({
					url:"/pages/pagefour/pages/SearchPage/SearchPage"
				})
			},
			downBox(index){
				this.isScreen = true
				// this.isScreen = !this.isScreen
				console.log(this.isScreen);
				this.currents = index
			},
			popupItem(index){
				console.log(this.downContent[this.currents]);
				this.currentIndex = index
				this.isScreen = false
				let name;
				for(let i=0;i< this.downContent[this.currents].length; i++){
					if(i == index){
						name = this.downContent[this.currents][i].text
					}
				}
				this.popupList[this.currents].name = name;
				if(this.currents==0){
					this.industryIndex = index;
				}else if(this.currents==1){
					this.platformIndex = index+1;
				}else if(this.currents==2){
					this.sortIndex = index;
				}else if(this.currents==3){
					this.statusIndex = index;
				}
				this.page = 1;
				this.getList();
			},
			changeNow(e){
				console.log(e)
				let index = e.target.dataset.index || e.currentTarget.dataset.index;
				
				if(index==1){
					this.statusIndex = -1;
					this.zxIndex = 2;
				}else{
					this.statusIndex = 1;
					this.zxIndex = 1;
				}
				this.getList();
			}
		}
	}
</script>

<style scoped lang="less">
	.popupList{
		max-height: 600upx !important;
	}
	.status_bar {
	  height: var(--status-bar-height);
	  width: 100%;
	}
	.index{
		// background-color: #F3F3F3;
		// height: calc(100vh - 100upx);
		height: 100vh;
		overflow: auto;
		padding: 120upx 0 0 0;
		.indexBox{
			//头部搜索开始
			height: 100%;
			.top_nav_wrap{
				background-color: #F9F0E4;
				position: fixed;
				// top: 40upx;
				left: 0;
				right: 0;
				top: 0;
				z-index: 999;
				.top-nav{
						// background-color: #F9F0E4;
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding: 0 24upx 0 0;
						// #ifdef MP-WEIXIN
						// height: 90upx;
						// #endif
						// #ifdef APP-PLUS
						// height: 100upx !important;
						// #endif
						box-sizing: border-box;
						// z-index: 999;
						.top_l{
							width: 44upx;
							height: 44upx;
							position: relative;
							box-sizing: content-box;
							.personal-icon1{
								width: 32upx; 
								height: 32upx;
								image{
									width: 100%;
									height: 100%;
								}
							}
							.personal-icon1.active{
								width: 100%;
								height: 100%;
								image{
									width: 100%;
									border-radius: 50%;
									height: 100%;
								}
							}
							.personal-icon2{
								position: absolute;
								bottom: 30upx;
								right: 0;
								width: 12upx;
								height: 12upx;
								image{
									width: 100%;
									height: 100%;
								}
							}
						}
						.top_center{
							display: flex;
							align-items: center;
							width: 426upx;
							// #ifdef MP-WEIXIN
							width: 260upx;
							// #endif
							height: 56upx;
							background: #FFFFFF;
							opacity: 1;
							border-radius: 34upx;
							padding: 12upx 32upx;
							box-sizing: border-box;
							.search-icon{
								width: 32upx;
								height: 32upx;
							}
							.inputBox{
								margin-left: 18upx;
								width: calc(100% - 114upx);
								input{
									width: 100%;
									font-size: 24upx;
								}
							}
						}
						.top_r{
							display: flex;
							align-items: center;
							.location-icon{
								
							}
							.locationName{ 
								font-size: 24upx;
								font-family: Source Han Sans CN;
								font-weight: 400;
								color: #333333;
								margin-left: 8upx;
							}
						}
					
				}
			}
		}
		//头部搜索结束
		// 轮播图开始
		.swiperBox{
			.swiper{
				height: 400upx;
				.menuBox{
					display: flex;
					flex-wrap: wrap;
					background: #FFFFFF;
					opacity: 1;
					padding: 32upx 47upx 64upx 47upx;
					.menuItem{
						display: flex;
						flex-direction: column;
						align-items: center;
						margin-right: 112upx;
						margin-bottom: 32upx;
						.menuIcon{
							width: 80upx;
							height: 80upx;
							background: linear-gradient(89deg, #FF4A4A 0%, #F63E2B 100%);
							opacity: 1;
							border-radius: 8upx;
							image{
								width: 100%;
								height: 100%;
							}
						}
						.menuName{
							font-size: 24upx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #333333;
							margin-top: 16upx;
						}
					}
					.menuItem:nth-child(4n+4){
						margin-right: 0;
					}
				}
			}
		}
		// 轮播图结束
		// 内容开始
		.index_contBox{
			padding: 32upx 24upx;
			height: 100%;
			box-sizing: border-box;
			.screenBox{
				position: relative;
				display: flex;
				align-items: center;
				height: 36upx;
				justify-content: space-between;
				.screenItem{
					display: flex;
					justify-content: center;
					align-items: center;
					min-width: 112upx;
					height: 36upx;
					background: #E5E5E5;
					opacity: 1;
					border-radius: 22upx;
					padding: 16upx 24upx;
					box-sizing: border-box;
					// margin-right: 48upx;
					.screenName{
						font-size: 20upx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						line-height: 34upx;
						color: #666666;
						margin-right: 8upx;
					}
				}
			}
			.commodityList{
				margin-top: 32upx;
				height: calc(100% - 100upx);
				.commodityItem{
					position: relative;
					display: flex;
					width: 702upx;
					min-height: 206upx;
					background: #FFFFFF;
					box-shadow: 0upx 2upx 14upx rgba(0, 0, 0, 0.1);
					opacity: 1;
					border-radius: 20upx;
					padding: 32upx 24upx 24upx;
					box-sizing: border-box;
					margin-bottom: 24upx;
					.commodityImage{
						width: 144upx;
						height: 144upx;
						border-radius: 8upx;
						margin-right: 16upx;
						overflow: hidden;
						background-position: center;
						background-size: cover;
						image{
							width: 100%;
							height: 100%;
							border-radius: 8upx;
						}
					}
					.commodity_R{
						width: calc(100% - 160upx);
						.commodity_titleBox{
							display: flex;
							align-items: center;
							.commodity-title{
								font-size: 24upx;
								font-family: Source Han Sans CN;
								font-weight: 400;
								line-height: 40upx;
								color: #333333;
								opacity: 1;
							}
							.member{
								min-width: 44upx;
								height: 24upx;
								background: #FF5555;
								opacity: 1;
								border-radius: 12upx;
								font-size: 16upx;
								font-family: Source Han Sans CN;
								font-weight: 400;
								line-height: 24upx;
								text-align: center;
								color: #FFFFFF;
								margin-left: 8upx;
							}
							.SubtitleBox{
								margin-left: 24upx;
								display: flex;
								align-items: center;
								.SubtitleItem{
									min-width: 48upx;
									height: 24upx;
									background: #EEEEEE;
									opacity: 1;
									border-radius: 8upx;
									font-size: 16upx;
									font-family: Source Han Sans CN;
									font-weight: 400;
									line-height: 24upx;
									text-align: center;
									color: #D0D0D0;
									margin-right: 8upx;
									padding: 0 10upx;
								}
							}
						}
						.addressBox{
							margin-top: 8upx;
							display: flex;
							align-items: center;
							.addressTitle{
								min-width: 48upx;
								height: 24upx;
								background: #FFAC3F;
								opacity: 1;
								border-radius: 4upx;
								font-size: 16upx;
								font-family: Source Han Sans CN;
								font-weight: 400;
								line-height: 24upx;
								text-align: center;
								color: #FFFFFF;
							}
							.address{
								font-size: 20upx;
								font-family: Source Han Sans CN;
								font-weight: 400;
								line-height: 24upx;
								color: #999999;
								margin-left: 8upx;
								label{
									line-height: 24upx;
								}
							}
						}
						.TiktokBox{
							margin-top: 8upx;
							display: flex;
							align-items: center;
							.TiktokImage{
								display: flex;
								justify-content: center;
								align-items: center;
								width: 48upx;
								height: 24upx;
								background: #260A20;
								opacity: 1;
								border-radius: 4upx;
								.TiktBmg{
									width: 24upx;
									height: 24upx;
								}
							}
							.TiktokNum{
								font-size: 20upx;
								font-family: Source Han Sans CN;
								font-weight: 400;
								line-height: 24upx;
								color: #333333;
								margin-left: 8upx;
							}
							.Tiktokgive{
								font-size: 20upx;
								font-family: Source Han Sans CN;
								font-weight: 400;
								line-height: 24upx;
								color: #333333;
								margin-left: 16upx;
							}
						}
						.introduceBox{
							margin-top: 8upx;
							display: flex;
							align-items: center;
							.introduceTitle{
								min-width: 48upx;
								height: 24upx;
								background: #FFAC3F;
								opacity: 1;
								border-radius: 4upx;
								font-size: 16upx;
								font-family: Source Han Sans CN;
								font-weight: 400;
								line-height: 24upx;
								text-align: center;
								color: #FFFFFF;
							}
							.introducetext{
								font-size: 20upx;
								font-family: Source Han Sans CN;
								font-weight: 400;
								line-height: 24upx;
								color: #333333;
								overflow: hidden;
								white-space: nowrap;
								text-overflow: ellipsis;
								margin-left: 8upx;
							}
						}
						.priceBox{
							position: absolute;
							top: 0;
							right: 0;
							// width: 76upx;
							height: 32upx;
							background: linear-gradient(206deg, #FC8643 0%, #FFAC3F 100%);
							opacity: 1;
							border-radius: 0upx 20upx 0upx 20upx;
							font-size: 16upx;
							font-family: Source Han Sans CN;
							font-weight: bold;
							line-height: 32upx;
							text-align: center;
							padding: 0 8upx;
							color: #FFFFFF;
						}
					}
				}
			}
			// .contentList{
			// 	margin-top: 24upx;
			// 	.contentItem{
			// 		width: 702upx;
			// 		height: auto;
			// 		background: #FFFFFF;
			// 		opacity: 1;
			// 		border-radius: 20upx;
			// 		margin-bottom: 16upx;
			// 		.contentItem_top{
			// 			display: flex;
			// 			padding: 32upx 0 24upx 24upx;
			// 			.contentImage{
			// 				width: 144upx;
			// 				height: 144upx;
			// 				border-radius: 8upx;
			// 				margin-right: 16upx;
			// 				image{
			// 					width: 100%;
			// 					height: 100%;
			// 				}
			// 			}
			// 			.content_R{
			// 				width: calc(100% - 160upx);
			// 				.contentNameBox{
			// 					display: flex;
			// 					align-items: center;
			// 					justify-content: space-between;
			// 					.contentItemName{
			// 						font-size: 24upx;
			// 						color: #333333;
			// 					}
			// 					.Royalties{
			// 						width: 92upx;
			// 						// height: 32upx;
			// 						background: linear-gradient(206deg, #FAD96C 0%, #FFAC3F 100%);
			// 						opacity: 1;
			// 						border-radius: 20upx 0 0 20upx;
			// 						font-size: 16upx;
			// 						color: #fff;
									
			// 						padding: 8upx;
			// 					}
			// 				}
			// 				.addressBox{
			// 					display: flex;
			// 					align-items: center;
			// 					justify-content: space-between;
			// 					margin-top: 24upx;
			// 					padding-right: 24upx;
			// 					.address{
			// 						font-size: 16upx;
			// 						font-family: Source Han Sans CN;
			// 						font-weight: 400;
			// 						color: #999999;
			// 					}
			// 					.addressNum{
			// 						font-size: 16upx;
			// 						font-family: Source Han Sans CN;
			// 						font-weight: 400;
			// 						color: #999999;
			// 					}
			// 				}
			// 				.fansBox{
			// 					display: flex;
			// 					align-items: center;
			// 					margin-top: 18upx;
			// 					.fansIcon{
			// 						display: flex;
			// 						justify-content: center;
			// 						align-items: center;
			// 						width: 48upx;
			// 						height: 24upx;
			// 						background: #260A20;
			// 						opacity: 1;
			// 						border-radius: 4upx;
			// 						image{
			// 							width: 24upx;
			// 							height: 24upx;
			// 						}
			// 					}
			// 					.fanstext{
			// 						width: calc(100% - 48upx);
			// 						font-size: 20upx;
			// 						font-family: Source Han Sans CN;
			// 						font-weight: 400;
			// 						color: #333333;
			// 						margin-left: 8upx;
			// 						overflow: hidden;
			// 						text-overflow: ellipsis;
			// 						white-space: nowrap;
			// 					}
			// 				}
			// 				.recommendBox{
			// 					display: flex;
			// 					align-items: center;
			// 					margin-top: 18upx;
			// 					.recommendtitle{
			// 						width: 48upx;
			// 						height: 24upx;
			// 						background: #FFAC3F;
			// 						opacity: 1;
			// 						border-radius: 4upx;
			// 						font-size: 16upx;
			// 						font-family: Source Han Sans CN;
			// 						font-weight: 400;
			// 						text-align: center;
			// 						line-height: 24upx;
			// 						color: #FFFFFF;
			// 						// padding: 4upx;
			// 						// box-sizing: border-box;
			// 						margin-right: 8upx;
			// 					}
			// 					.recommendtext{
			// 						width: calc(100% - 48upx);
			// 						font-size: 20upx;
			// 						font-family: Source Han Sans CN;
			// 						font-weight: 400;
			// 						color: #333333;
			// 						overflow: hidden;
			// 						text-overflow: ellipsis;
			// 						white-space: nowrap;
			// 					}
			// 				}
			// 				.fieldBox{
			// 					display: flex;
			// 					align-items: center;
			// 					margin-top: 18upx;
			// 					.fieldtitle{
			// 						width: 48upx;
			// 						height: 24upx;
			// 						background: #FF5555;
			// 						opacity: 1;
			// 						border-radius: 4upx;
			// 						font-size: 16upx;
			// 						font-family: Source Han Sans CN;
			// 						font-weight: 400;
			// 						line-height: 24upx;
			// 						text-align: center;
			// 						color: #FFFFFF;
			// 						// padding: 4upx;
			// 					}
			// 					.fieldtext{
			// 						width: calc(100% - 48upx);
			// 						font-size: 20upx;
			// 						font-family: Source Han Sans CN;
			// 						font-weight: 400;
			// 						color: #333333;
			// 						margin-left: 8upx;
			// 						overflow: hidden;
			// 						white-space: nowrap;
			// 						text-overflow: ellipsis;
			// 					}
			// 				}
			// 			}
			// 		}
			// 		.contentItem_B{
			// 			display: flex;
			// 			align-items: center;
			// 			justify-content: space-between;
			// 			padding: 12upx 24upx;
			// 			background-color: #FFEBD0;
			// 			border-radius: 0 0 20upx 20upx;
			// 			.surplus{
			// 				font-size: 16upx;
			// 				font-family: Source Han Sans CN;
			// 				font-weight: 400;
			// 				color: #999999;
			// 			}
			// 			.surplusNum{
			// 				font-size: 16upx;
			// 				font-family: Source Han Sans CN;
			// 				font-weight: 400;
			// 				color: #333333;
			// 			}
			// 		}
			// 	}
			// }
		}
		// 内容结束
		// 下拉框开始
		.popupBox{
			.popupList{
				padding: 32upx 24upx;
				.popupItem{
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 32upx 0;
					.popupName{
						font-size: 24upx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #333333;
					}
					.currentColor{
						font-size: 24upx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #FFAC3F;
					}
				}
			}
		}
		// 下拉框结束
		.cooperationBox{
			position: fixed;
			right: 24upx;
			bottom: 350upx;
			width: 112upx;
			height: 112upx;
			background: linear-gradient(90deg, #FF9F68 0%, #FC6843 100%);
			box-shadow: 0 0 12upx rgba(255, 128, 0, 0.5);
			border-radius: 50%;
			font-size: 20upx;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: #FFFFFF;
			text-align: center;
			line-height: 112upx;
			z-index: 999;
		}
		.addBox{
			display: flex;
			justify-content: center;
			align-items: center;
			position: fixed;
			right: 24upx;
			bottom: 200upx;
			width: 112upx;
			height: 112upx;
			background: linear-gradient(90deg, #FFAC3F 0%, #FC8643 100%);
			box-shadow: 0 0 12upx rgba(255, 128, 0, 0.5);
			border-radius: 50%;
		}
	}
</style>
